<template>
    <div class="share">
        <swiper dots-position="center" loop  height="40vw" :interval=3000>
            <swiper-item  v-for="(item,index) in dataList" :key="index">
                <img class="itemImg" :src="item.swiperimg | RIH" alt="">
            </swiper-item>
        </swiper>
        <scroller lock-y :scrollbar-x=false>
            <div class="box1">
                <div class="box1Item" v-for="(bannerItem,index) in bannerList">
                    <img  :src="bannerItem.mindeximg | RIH" alt="">
                    <span v-text="bannerItem.categoryname"></span>
                </div>
            </div>
        </scroller>
        <div class="gray"></div>
        <div class="hotTitle">
            <span class="fa fa-stop"></span>
            <p>热帖推荐</p>
            <span class="fa fa-stop"></span>
        </div>
        <tiezi></tiezi>
    </div>
</template>

<script>
    import { Swiper,SwiperItem } from 'vux'
    import { Scroller } from 'vux'
    import tiezi from '../components/tiezi'
    export default {
        components: {
            Swiper,
            SwiperItem,
            Scroller,
            tiezi
        },
        data:function () {
            return{
                dataList:[],
                bannerList:[]
            }
        },
        mounted(){
            var that = this
            this.$http.get('/rainApi/swiper/getswiperajax').then(function (data) {
                that.dataList = data.data.data
            })
            this.$http.get('/rainApi/category/getCategoryAjax').then(function (data) {
                that.bannerList = data.data.data
            })
        }
    }
</script>

<style scoped>
    .itemImg{
        width: 100vw;
        height: 40vw;
    }
    .vux-slider > .vux-indicator-center{
        bottom: 8px;

    }
    .box1 {
        margin-top:4vw ;
        margin-left: 2vw;
        display: flex;
        width: 180vw;
    }
    .box1Item{
        position: relative;
    }
    .box1 span{
        position: absolute;
        left: 13vw;
        top:10vw ;
        display: block;
        padding: 2vw;
        background: white;
        font-size: 3.5vw;
    }
    .box1 img{
        width: 42vw;
        height:27vw ;
        margin-left: 2vw;
        border-radius: 5px;
    }
    .gray{
        width: 100vw;
        height: 5px;
        background: #f0f0f0;
    }
    .hotTitle{
        text-align: center;
        height: 15vw;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #e2e5e7;
    }
    .hotTitle p{
        margin: 0 8vw;
    }
    .hotTitle span{
        font-size: 6px;
        transform: rotateZ(45deg);
    }
</style>
